import { useComp } from '@/hooks'
import { ElButton, ElInput } from 'element-plus'
import { ref } from 'vue'
import { ANY_DATA_TYPE } from '@/type'
/**
 * 电子单张页面
 */
export default useComp(() => {
  const inputValue1 = ref('')
  const getValue = ref('')
  const list = ref([])
  const addTemp = async (desc: string | undefined) => {
    const { addPage } = await import('@/api/index')
    await addPage({ desc: desc })
  }
  const getPageComp = async (id: string | undefined | number) => {
    const { getPage } = await import('@/api/index')
    const result = await getPage({ id: id })
    console.log(result)
    list.value = result?.data.data || []
  }
  return () => (
    <div class={'temp-page'}>
      <h1>Temp page</h1>
      <p>Temp page content</p>
      <p>{process.env.NODE_TEST}</p>
      <ElInput v-model={inputValue1.value} placeholder={'请输入'} class={'mar__t-10'}></ElInput>
      <ElButton onClick={() => addTemp(inputValue1.value)} class={'mar__t-10'}>添加数据</ElButton>
      <ElInput v-model={getValue.value} placeholder={'请输入'} class={'mar__t-10'}></ElInput>
      <ElButton onClick={() => getPageComp(getValue.value)} class={'mar__t-10'}>获取数据</ElButton>
      {list.value.map((item: ANY_DATA_TYPE) => {
        return <div class={'mar__t-20'}>
          <span>{item.desc}</span>
        </div>
      })}
    </div>
  )
})
